<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <input id="inputEL" type="text" value="jack">
  <script>
    const inputEL = document.getElementById('inputEL');
    // 属性变化特性是不一定同步（value）
    console.log(inputEL.getAttribute('value'));
    inputEL.value = 'tom'
    console.log(inputEL.getAttribute('value'));


    // 特性变化属性是一定同步
    // console.log(inputEL.value);
    // inputEL.setAttribute('value', 'lucy');
    // console.log(inputEL.value);



    // 界面变化一致
    setTimeout(() => {
      // inputEL.value = 'lili';
      // inputEL.setAttribute('value', 'lucy')
    }, 3000)

  </script>
</body>

</html>